import { useState, useEffect } from 'react'
import { Divider, Empty } from 'antd-mobile'
import BarChart from '../../../../components/BarChart'
import { useStore4Analysis, useStore4Tabs, useStore4SortFiveData, useStore4SevenStarData } from '../../../../store'
import { TAB_KEY_SORT_FIVE, TAB_KEY_SEVEN_STAR } from '../../../../constants/index'
import { getFourNumbersSum } from '../../../../data/sortFiveUtils'

import './index.less'

function SumOfTimes() {

  const key = useStore4Tabs(state => state.key)
  const sortFiveData = useStore4SortFiveData(state => state.sortFiveData)
  const sevenStarData = useStore4SevenStarData(state => state.sevenStarData)
  const periodCount = useStore4Analysis(state => state.periodCount)

  const [data, setData] = useState([])

  useEffect(() => {

    const map = {}
    let list = []

    if (key == TAB_KEY_SORT_FIVE) { // 排列五
      list = sortFiveData.list.slice(0, periodCount)
    }
    if (key == TAB_KEY_SEVEN_STAR) { // 七星彩
      list = sevenStarData.list.slice(0, periodCount)
    }

    list.map(item => {
      const sum = getFourNumbersSum(item.lotteryDrawResult)
      if (!map[sum]) {
        map[sum] = 1
      }
      else {
        map[sum]++
      }
    })

    setData(Object.keys(map).reverse().map(key => ({ name: key, count: map[key] })))

  }, [key, periodCount])

  return (
    <div className='BarChartWrapper'>
      {
        data.length > 0 ?
          <BarChart data={data} />
          :
          <Empty description='暂无数据' />
      }
    </div>
  )
}

export default SumOfTimes